import React, {memo, useState, useCallback} from 'react'
import PropTypes from 'prop-types'
import classname from 'classnames'
import {ORDER_DEPART, ORDER_DURATION} from './constant'
import './Bottom.css'

const Filter = memo(function Filter (props) {
  const {name, checked, toggle, value} = props
  return (
    <li className={classname({checked})} onClick={() => toggle(value)}>
      {name}
    </li>
  )
})

Filter.prototype = {
  name: PropTypes.string.isRequired,
  checked: PropTypes.bool.isRequired
}

const Option = memo(function Option (props) {
  const {title, options, checkedMap, update} = props

  const toggle = useCallback((value) => {
    console.log(value);
    
    const newCheckMap = {...checkedMap}

    if(value in checkedMap) {
      delete newCheckMap[value]
    }else{
      newCheckMap[value] = true
    }
    update(newCheckMap)
  }, [checkedMap, update])

  return (
    <div className="option">
      <h3>{title}</h3>
      <ul>
        {
          options.map(option => {
            return <Filter toggle={toggle} key={option.value} {...option} checked={option.value in checkedMap} /> 
          })
        }
      </ul>
    </div>
  )
})

Option.prototype = {
  title: PropTypes.string.isRequired,
  options: PropTypes.array.isRequired, 
  checkMap: PropTypes.object.isRequired
}

const BottomModal = memo(function BottomModal (props) {
  const {
    ticketTypes,
    trainTypes,
    departStations,
    arriveStations,
    checkedTicketTypes,
    checkTrainTypes,
    checkDepartStations,
    checkArriveStations,
    departTimeStart,
    departTimeEnd,
    arriveTimeStart,
    arriveTimeEnd,
    setCheckTrainTypes,
    setCheckedTicketTypes,
    setCheckDepartStations,
    setCheckArriveStations,
    setDepartTimeStart,
    setDepartTimeEnd,
    setArriveTimeStart,
    setArriveTimeEnd,
    toggleIsFiltersOpen
  } = props

  const [localCheckedTicketTypes, setLocalCheckedTicketTypes] = useState(() => {
    return {
      ...checkedTicketTypes
    }
  })
  const [localCheckedTrainTypes, setLocalCheckedTrainTypes] = useState(() => {
    return {
      ...checkTrainTypes
    }
  })
  const [localCheckDepartStations, setLocalCheckDepartStations] = useState(() => {
    return {
      ...checkDepartStations
    }
  })
  const [localCheckArriveStations, setLocalCheckArriveStations] = useState(() => {
    return {
      ...checkArriveStations
    }
  })

  const optionGroup = [
    {
      title: '坐席类型',
      options: ticketTypes,
      checkedMap: localCheckedTicketTypes,
      update: setLocalCheckedTicketTypes
    },
    {
      title: '车次类型',
      options: trainTypes,
      checkedMap: localCheckedTrainTypes,
      update: setLocalCheckedTrainTypes
    },
    {
      title: '出发车站',
      options: departStations,
      checkedMap: localCheckDepartStations,
      update: setLocalCheckDepartStations
    },
    {
      title: '到达车站',
      options: arriveStations,
      checkedMap: localCheckArriveStations,
      update: setLocalCheckArriveStations
    },
  ]

  function sure () {
    setCheckedTicketTypes(localCheckedTicketTypes)
    setCheckTrainTypes(localCheckedTrainTypes)
    setCheckDepartStations(localCheckDepartStations)
    setCheckArriveStations(localCheckArriveStations)

    toggleIsFiltersOpen(true)
  }

  function reset () {
    setLocalCheckedTicketTypes(true)
    setLocalCheckedTrainTypes(true)
    setLocalCheckDepartStations(true)
    setLocalCheckArriveStations(true)
  }

  return (
    <div className="bottom-modal">
      <div className="bottom-dialog">
        <div className="bottom-dialog-content">
          <div className="title">
            <span className="reset" onClick={reset}>重置</span>
            <span className="ok" onClick={sure}>确定</span>
          </div>
          <div className="options">
            {
              optionGroup.map(group => <Option {...group} key={group.title} />)
            }
          </div>
        </div>
      </div>
    </div>
  )
})

BottomModal.prototype = {
  toggleIsFiltersOpen: PropTypes.func.isRequired,
  ticketTypes: PropTypes.array.isRequired,
  trainTypes: PropTypes.array.isRequired,
  departStations: PropTypes.array.isRequired,
  arriveStations: PropTypes.array.isRequired,
  checkedTicketTypes: PropTypes.array.isRequired,
  checkTrainTypes: PropTypes.array.isRequired,
  checkDepartStations: PropTypes.array.isRequired,
  checkArriveStations: PropTypes.array.isRequired,
  departTimeStart: PropTypes.number.isRequired,
  departTimeEnd: PropTypes.number.isRequired,
  arriveTimeStart: PropTypes.number.isRequired,
  arriveTimeEnd: PropTypes.number.isRequired,
  setCheckTrainTypes: PropTypes.func.isRequired,
  setCheckedTicketTypes: PropTypes.func.isRequired,
  setCheckDepartStations: PropTypes.func.isRequired,
  setCheckArriveStations: PropTypes.func.isRequired,
  setDepartTimeStart: PropTypes.func.isRequired,
  setDepartTimeEnd: PropTypes.func.isRequired,
  setArriveTimeStart: PropTypes.func.isRequired,
  setArriveTimeEnd: PropTypes.func.isRequired
}

export default function Bottom (props) {
  const {highSpeed, orderType, onlyTickets, isFiltersOpen, toggleHighSpeed, toggleOrderType, toggleOnlyTickets, toggleIsFiltersOpen,
    ticketTypes,
    trainTypes,
    departStations,
    arriveStations,
    checkedTicketTypes,
    checkTrainTypes,
    checkDepartStations,
    checkArriveStations,
    departTimeStart,
    departTimeEnd,
    arriveTimeStart,
    arriveTimeEnd,
    setCheckTrainTypes,
    setCheckedTicketTypes,
    setCheckDepartStations,
    setCheckArriveStations,
    setDepartTimeStart,
    setDepartTimeEnd,
    setArriveTimeStart,
    setArriveTimeEnd
  } = props
  return (
    <div className="bottom">
      <div className="bottom-filters">
        <span className="item" onClick={toggleOrderType}>
          <i className="icon">&#xf065;</i>
          {
            orderType === ORDER_DEPART ? '出发 早>晚' : '耗时 短>长'
          }
          </span>
          <span className={classname('item', {
            'item-on': highSpeed
          })} onClick={toggleHighSpeed}>
            <i className="icon">{ highSpeed ? '\uf43f' : '\uf43e'}</i>
            只看高铁/动车
          </span>
          <span className={classname('item', {
            'item-on': onlyTickets
          })} onClick={toggleOnlyTickets}>
            <i className="icon">{ onlyTickets ? '\uf43d' : '\uf43c'}</i>
            只看有票
          </span>
          <span className={classname('item', {
            'item-on': isFiltersOpen
          })} onClick={toggleIsFiltersOpen}>
            <i className="icon">{ '\uf0f7'}</i>
            综合筛选
          </span>
      </div>
      {
        isFiltersOpen && (<BottomModal
          ticketTypes={ticketTypes}
          trainTypes={trainTypes}
          departStations={departStations}
          arriveStations={arriveStations}
          checkedTicketTypes={checkedTicketTypes}
          checkTrainTypes={checkTrainTypes}
          checkDepartStations={checkDepartStations}
          checkArriveStations={checkArriveStations}
          departTimeStart={departTimeStart}
          departTimeEnd={departTimeEnd}
          arriveTimeStart={arriveTimeStart}
          arriveTimeEnd={arriveTimeEnd}
          setCheckTrainTypes={setCheckTrainTypes}
          setCheckedTicketTypes={setCheckedTicketTypes}
          setCheckDepartStations={setCheckDepartStations}
          setCheckArriveStations={setCheckArriveStations}
          setDepartTimeStart={setDepartTimeStart}
          setDepartTimeEnd={setDepartTimeEnd}
          setArriveTimeStart={setArriveTimeStart}
          setArriveTimeEnd={setArriveTimeEnd}
          toggleIsFiltersOpen={toggleIsFiltersOpen}
          />)
      }
    </div>
  )
}

Bottom.prototype = {
  toggleHighSpeed: PropTypes.func.isRequired,
  toggleOrderType: PropTypes.func.isRequired,
  toggleOnlyTickets: PropTypes.func.isRequired,
  toggleIsFiltersOpen: PropTypes.func.isRequired,
  highSpeed: PropTypes.bool.isRequired,
  orderType: PropTypes.number.isRequired, 
  onlyTickets: PropTypes.bool.isRequired,
  isFiltersOpen: PropTypes.bool.isRequired,
  ticketTypes: PropTypes.array.isRequired,
  trainTypes: PropTypes.array.isRequired,
  departStations: PropTypes.array.isRequired,
  arriveStations: PropTypes.array.isRequired,
  checkedTicketTypes: PropTypes.array.isRequired,
  checkTrainTypes: PropTypes.array.isRequired,
  checkDepartStations: PropTypes.array.isRequired,
  checkArriveStations: PropTypes.array.isRequired,
  departTimeStart: PropTypes.number.isRequired,
  departTimeEnd: PropTypes.number.isRequired,
  arriveTimeStart: PropTypes.number.isRequired,
  arriveTimeEnd: PropTypes.number.isRequired,
  setCheckTrainTypes: PropTypes.func.isRequired,
  setCheckedTicketTypes: PropTypes.func.isRequired,
  setCheckDepartStations: PropTypes.func.isRequired,
  setCheckArriveStations: PropTypes.func.isRequired,
  setDepartTimeStart: PropTypes.func.isRequired,
  setDepartTimeEnd: PropTypes.func.isRequired,
  setArriveTimeStart: PropTypes.func.isRequired,
  setArriveTimeEnd: PropTypes.func.isRequired
}